<template>
	<view class="con">
		<view class="nav">
			<view class="appnav" style=" height: var(--status-bar-height);width: 100%;">
				
			</view>
			<view class="search" @click="tosearch">
				输入搜索关键字
			</view>
		</view>
		<view class="content">
			<scroll-view class="list-l" :scroll-y="true">
				<view class="l-item" :class="{'l-item-s':flag==index}" v-for="(item,index) in datalist" @click="select(index)" :key="index">
					<image src="../../static/icon/listicon.png" v-if="flag==index"></image>
					{{item.categoryName}}
				</view>
			</scroll-view>
			<scroll-view class="list-r" :scroll-y="true">
				<view class="g-box">
					<!-- <view class="r-title">女士护肤</view> -->
					<view class="r-box">
						<view class="r-item" v-for="(item,index) in rlist.categoryList" :key="index" @click="tolist(item.categoryId)">
							<image :src="item.imageUrl" mode="aspectFill"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
					<!-- <view class="r-title">女士护肤</view>
					<view class="r-box">
						<view class="r-item">
							<image src="../../static/index.png" mode="aspectFill"></image>
							<view>面部金华</view>
						</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {product} from"../../api/product.js"
	export default{
		data() {
			return {
				flag:0,
				datalist:[],
				rlist:[]
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			// 点击左边
			select(e){
				this.flag=e
				this.rlist=this.datalist[e]
			},
			// 点击搜索框
			tosearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			// 获取数据
			async getlist(){
				let res=await this.get(product)
				this.datalist=res.data
				this.rlist=res.data[0]
				console.log(res)
			},
			// 点击分类跳转商品列表
			tolist(id){
				uni.navigateTo({
					url:"/pages/product/productlist?pid="+id
				})
			}
			
		}
	}
</script>

<style scoped>
	.nav{
		padding: 15rpx 0;
		background-color: #FFFFFF;
		border-bottom: 1px #E4E7ED solid;
		position: fixed;
		top: 0;
		z-index: 9;
		left: 0;
		width: 750rpx;
	}
	.r-item{
		width: 190rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding:30rpx 0 ;
	}
	.r-item>view{
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		margin-top: 30rpx;

	}
	.r-item>image{
		width:130rpx ;
		height: 130rpx;
	}
	.r-box{
		display: flex;
		flex-wrap: wrap;
	}
	.r-title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		padding-left: 40rpx;

	}
	.g-box{
		padding: 40rpx 0;
	}
	.list-r{
		background-color: #FFFFFF;
		width: 570rpx;
		height: 100%;
		/* #ifdef H5 */
		padding-bottom: 120rpx;
		/* #endif */
		box-sizing: border-box;
	}
	.l-item{
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
		line-height: 88rpx;
		font-weight: bold;
		position: relative;
	}
	.l-item>image{
		width: 6rpx;
		height: 68rpx;
		position: absolute;
		left: 0;
		top: 10rpx;
	}
	.l-item-s{
		background-color: #FFFFFF !important;
		font-size: 30rpx !important;
	}
	.list-l{
		width: 180rpx;
		height: 100%;
		overflow: auto;
		/* #ifdef H5 */
		padding-bottom: 120rpx;
		/* #endif */
		box-sizing: border-box;
	}
	.content{
		display: flex;
		height: calc(100vh - 90rpx - var(--status-bar-height));
		position: fixed;
		top:calc( 90rpx + var(--status-bar-height)) ;
	}
	.con{
		width: 750rpx;
		height: 100vh;
		background: #F6F6F6;
	}
	.search{
		width: 633rpx;
		height: 58rpx;
		border: 1px solid #B2B2B2;
		opacity: 1;
		border-radius: 29rpx;
		color: #666666;
		text-align: center;
		line-height: 58rpx;
		margin: 0 auto;
	}
</style>
